<template>
    <!--员工分布饼图-->
    <el-card
        v-loading.body="isLoading"
        id="employeeChart"
        class="box-card">
        员工分布饼图
    </el-card>
</template>

<script>
    export default {
        name: "EmployeeDistribution",
        data(){
            return {
                isLoading:true
            }
        },methods:{
            initChart(realData){
              const myChart =
                  this.$echarts.init(document.getElementById('employeeChart'));
              myChart.setOption({
                    title: {
                        text: '员工结构分布'
                    },
                    series: [
                        {
                            type: 'pie',
                            name:'人员占比',
                            data: realData
                        }
                        ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend:{
                     left:"80%"
                    }
                });
              this.isLoading=false
            },
           async getEmployeeDistributionData(){
                const {data:res}=await this.$http.get("/employee/getDistributionData");
                if (res.status===200){
                    this.initChart(res.data)
                }else {
                    this.$message.error("初始化图表数据失败")
                }
            }
        },mounted() {
            this.getEmployeeDistributionData();

        }
    }
</script>

<style scoped>
    .box-card{
        width: 100%;
        height: 330px;
    }
</style>
